<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools 1.3 Documentation - Utilities/Color</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
      <h4 class="menu-item"><a href="#Color">Color</a></h4>
      <div class="menu-item"><a href="#Color:mix">mix</a></div>
      <div class="menu-item"><a href="#Color:Invert">Invert</a></div>
      <div class="menu-item"><a href="#Color:setHue">setHue</a></div>
      <div class="menu-item"><a href="#Color:setSaturation">setSaturation</a></div>
      <div class="menu-item"><a href="#Color:setBrightness">setBrightness</a></div>
      <div class="menu-item"><a href="#RGB">RGB</a></div>
      <div class="menu-item"><a href="#HSB">HSB</a></div>
      <h4 class="menu-item"><a href="#Array">Array</a></h4>
      <div class="menu-item"><a href="#Array:rgbToHsb">rgbToHsb</a></div>
      <div class="menu-item"><a href="#Array:hsbToRgb">hsbToRgb</a></div>
    </div>
    <div class="l-border r-border span-15 content">
      <h1 id="Color"><a href="#Color">Class: Color</a></h1>
      <p class="description">Creates a new Color Class, which is an array with some color specific methods.</p>
      <h3>Syntax</h3>
      <pre class="javascript"><span class="kw2">var</span> myColor = <span class="kw2">new</span> Color<span class="br0">(</span>color<span class="br0">[</span>, type<span class="br0">]</span><span class="br0">)</span>;

</pre>
      <h3>Arguments</h3>
      <ol>
        <li>color - (<em>mixed</em>) A string or an array representation of a color.</li>
        <li>type  - (<em>string</em>, optional) A string representing the type of the color to create.</li>
      </ol>
      <h3>Color</h3>
      <p>There are three typical representations of color: String, RGB, and HSB. For String representation see <a href="../../../docs/core/Element/Element.Style.html#Element:setStyles">Element:setStyle</a> for more information.</p>
      <h3>Examples</h3>
      <h5>String Representation</h5>
      <pre class="javascript"><span class="st0">'#fff'</span>
</pre>
      <h5>RGB and HSB Representation</h5>
      <pre class="javascript"><span class="br0">[</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">]</span>
<span class="co1">//Or:</span>
<span class="br0">[</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">1</span><span class="br0">]</span> <span class="co1">//(For transparency.)</span>

</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>array</em>) A new Color instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> black = <span class="kw2">new</span> Color<span class="br0">(</span><span class="st0">'#000'</span><span class="br0">)</span>;

<span class="kw2">var</span> purple = <span class="kw2">new</span> Color<span class="br0">(</span><span class="br0">[</span><span class="nu0">255</span>,<span class="nu0">0</span>,<span class="nu0">255</span><span class="br0">]</span><span class="br0">)</span>;
</pre>
      <h3>Notes</h3>
      <ul>
        <li>For HSB colors, you need to specify the second argument.</li>
      </ul>
      <h2 id="Color:mix"><a href="#Color:mix">Color Method: mix</a></h2>
      <p class="description">Mixes two or more colors with the Color.</p>
      <h3>Syntax</h3>
      <pre class="javascript"><span class="kw2">var</span> myMix = myColor.<span class="me1">mix</span><span class="br0">(</span>color<span class="br0">[</span>, color2<span class="br0">[</span>, color3<span class="br0">[</span>, ...<span class="br0">]</span><span class="br0">[</span>, alpha<span class="br0">]</span><span class="br0">)</span>;

</pre>
      <h3>Arguments</h3>
      <ol>
        <li>color - (<em>mixed</em>) A single or many colors, in hex or rgb representation, to mix with this Color.</li>
        <li>alpha - (<em>number</em>, optional) If the last argument is a number, it will be treated as the amount of the color to mix.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>array</em>) A new Color instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="co1">// mix black with white and purple, each time at 10% of the new color</span>
<span class="kw2">var</span> darkpurple = <span class="kw2">new</span> Color<span class="br0">(</span><span class="st0">'#000'</span><span class="br0">)</span>.<span class="me1">mix</span><span class="br0">(</span><span class="st0">'#fff'</span>, <span class="br0">[</span><span class="nu0">255</span>, <span class="nu0">0</span>, <span class="nu0">255</span><span class="br0">]</span>, <span class="nu0">10</span><span class="br0">)</span>;

&nbsp;
$<span class="br0">(</span><span class="st0">'myDiv'</span><span class="br0">)</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'background-color'</span>, darkpurple<span class="br0">)</span>;
</pre>
      <h2 id="Color:Invert"><a href="#Color:Invert">Color Method: invert</a></h2>
      <p class="description">Inverts the Color.</p>
      <h3>Syntax</h3>
      <pre class="javascript"><span class="kw2">var</span> myInvert = myColor.<span class="me1">invert</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>array</em>) A new Color instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> white = <span class="kw2">new</span> Color<span class="br0">(</span><span class="st0">'#fff'</span><span class="br0">)</span>;

<span class="kw2">var</span> black = white.<span class="me1">invert</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h2 id="Color:setHue"><a href="#Color:setHue">Color Method: setHue</a></h2>
      <p class="description">Modifies the hue of the Color, and returns a new one.</p>
      <h3>Syntax</h3>
      <pre class="javascript"><span class="kw2">var</span> hue = myColor.<span class="me1">setHue</span><span class="br0">(</span>value<span class="br0">)</span>;
</pre>
      <h3>Arguments</h3>
      <ol>
        <li>value - (<em>number</em>) The hue to set.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(arrays) A new Color instance.</li>
      </ul>
      <h3>Example</h3>
      <pre class="javascript"><span class="kw2">var</span> myColor = <span class="kw2">new</span> Color<span class="br0">(</span><span class="st0">'#f00'</span><span class="br0">)</span>;

<span class="kw2">var</span> myElement = $<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>;
&nbsp;
<span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
    myElement.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'color'</span>, myColor.<span class="me1">setHue</span><span class="br0">(</span>myColor.<span class="me1">hsb</span><span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span>++<span class="br0">)</span><span class="br0">)</span><span class="br0">)</span>;

<span class="br0">}</span><span class="br0">)</span>.<span class="me1">periodical</span><span class="br0">(</span><span class="nu0">250</span><span class="br0">)</span>;
</pre>
      <h2 id="Color:setSaturation"><a href="#Color:setSaturation">Color Method: setSaturation</a></h2>
      <p class="description">Changes the saturation of the Color, and returns a new one.</p>
      <h3>Syntax</h3>
      <pre class="javascript"><span class="kw2">var</span> saturate = myColor.<span class="me1">setSaturation</span><span class="br0">(</span>percent<span class="br0">)</span>;
</pre>
      <h3>Arguments</h3>
      <ol>
        <li>percent - (<em>number</em>) The percentage of the saturation to set.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>array</em>) A new Color instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> myColor = <span class="kw2">new</span> Color<span class="br0">(</span><span class="st0">'#f00'</span><span class="br0">)</span>;
$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'mouseenter'</span>, <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>

    <span class="kw1">this</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'background-color'</span>, myColor.<span class="me1">setSaturation</span><span class="br0">(</span>myColor.<span class="me1">hsb</span><span class="br0">[</span><span class="nu0">1</span><span class="br0">]</span>++<span class="br0">)</span><span class="br0">)</span>;

<span class="br0">}</span><span class="br0">)</span>;
</pre>
      <h2 id="Color:setBrightness"><a href="#Color:setBrightness">Color Method: setBrightness</a></h2>
      <p class="description">Changes the brightness of the Color, and returns a new one.</p>
      <h3>Syntax</h3>
      <pre class="javascript"><span class="kw2">var</span> brighten = myColor.<span class="me1">setBrightness</span><span class="br0">(</span>percent<span class="br0">)</span>;

</pre>
      <h3>Arguments</h3>
      <ol>
        <li>percent - (<em>number</em>) The percentage of the brightness to set.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>array</em>) A new Color instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> myColor = <span class="kw2">new</span> Color<span class="br0">(</span><span class="st0">'#000'</span><span class="br0">)</span>;
$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'mouseenter'</span>, <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>

    <span class="kw1">this</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'background-color'</span>, myColor.<span class="me1">setBrightness</span><span class="br0">(</span>myColor.<span class="me1">hsb</span><span class="br0">[</span><span class="nu0">2</span><span class="br0">]</span>++<span class="br0">)</span><span class="br0">)</span>;

<span class="br0">}</span><span class="br0">)</span>;
</pre>
      <h2 id="RGB"><a href="#RGB">Function: $RGB</a></h2>
      <p class="description">Shortcut to create a new color, based on red, green, blue values.</p>
      <h3>Syntax</h3>
      <pre class="javascript"><span class="kw2">var</span> myColor = $RGB<span class="br0">(</span>r, g, b<span class="br0">)</span>;

</pre>
      <h3>Arguments</h3>
      <ol>
        <li>r - (<em>number</em>) A red value from 0 to 255.</li>
        <li>g - (<em>number</em>) A green value from 0 to 255.</li>
        <li>b - (<em>number</em>) A blue value from 0 to 255.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>array</em>) A new Color instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> myColor = $RGB<span class="br0">(</span>$random<span class="br0">(</span><span class="nu0">0</span>,<span class="nu0">255</span><span class="br0">)</span>, $random<span class="br0">(</span><span class="nu0">0</span>,<span class="nu0">255</span><span class="br0">)</span>, $random<span class="br0">(</span><span class="nu0">0</span>,<span class="nu0">255</span><span class="br0">)</span><span class="br0">)</span>;

</pre>
      <h2 id="HSB"><a href="#HSB">Function: $HSB</a></h2>
      <p class="description">Shortcut to create a new color, based on: hue, saturation, brightness values.</p>
      <h3>Syntax</h3>
      <pre class="javascript"><span class="kw2">var</span> myColor = $HSB<span class="br0">(</span>h, s, b<span class="br0">)</span>;

</pre>
      <h3>Arguments</h3>
      <ol>
        <li>h - (<em>number</em>) A hue value from 0 to 359.</li>
        <li>s - (<em>number</em>) A saturation value from 0 to 100.</li>
        <li>b - (<em>number</em>) A brightness value from 0 to 100.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>array</em>) A new Color instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> myColor = $HSB<span class="br0">(</span><span class="nu0">50</span>, <span class="nu0">50</span>, <span class="nu0">100</span><span class="br0">)</span>;

</pre>
      <h1 id="Array"><a href="#Array">Type: Array</a></h1>
      <p class="description">Contains Array prototypes.</p>
      <h3>See Also</h3>
      <ul>
        <li><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array">MDC Array</a></li>
      </ul>
      <h2 id="Array:rgbToHsb"><a href="#Array:rgbToHsb">Array Method: rgbToHsb</a></h2>
      <p class="description">Converts a RGB array to an HSB array.</p>
      <h3>Syntax</h3>
      <pre class="javascript"><span class="kw2">var</span> myHSB = myRGBArray.<span class="me1">rgbToHsb</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>array</em>) An array with HSB values.</li>
      </ul>
      <h3>Example</h3>
      <pre class="javascript"><span class="kw2">var</span> myHSB = <span class="br0">[</span><span class="nu0">255</span>, <span class="nu0">0</span>, <span class="nu0">0</span><span class="br0">]</span>.<span class="me1">rgbToHsb</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">//Returns [0, 100, 100].</span>

</pre>
      <h2 id="Array:hsbToRgb"><a href="#Array:hsbToRgb">Array Method: hsbToRgb</a></h2>
      <p class="description">Converts an HSB array to a RGB array.</p>
      <h3>Syntax</h3>
      <pre class="javascript"><span class="kw2">var</span> myHSB = myRGBArray.<span class="me1">hsbToRgb</span><span class="br0">(</span><span class="br0">)</span>;

</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>array</em>) An array with RGB values.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> myRGB = <span class="br0">[</span><span class="nu0">0</span>, <span class="nu0">100</span>, <span class="nu0">100</span><span class="br0">]</span>.<span class="me1">hsbToRgb</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">//myRGB = [255, 0, 0]</span>

</pre>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
